<template>
    <div class="down-list">
        <ul class="filter-div">
            <li v-for="item in filterList" :key="item.id" @click="openDialog(item)" :class="{active:showType==item.id}" :style="{width:((1/Object.keys(filterList).length)*100)+'%'}">
                <span class="filter-name">{{item.activeName }}</span>
                <img src="../../assets/img/next.png" alt="" class="next">
            </li>
        </ul>
        <div class="masks other" v-show="showOtherMask" @click="closeDialog()" :style="{top:top||'1.68rem'}">
            <transition name="top">
                <div class="filter-box" v-for="item in filterList" v-if="showType==item.id" >
                    <template v-if="item.data.length>0">
                        <ul class="filter-block period-block">
                            <li v-for="(list,index) in item.data" :key="index" @click="changeOther(item,list)" :class="{active:list.id===item.activeId}">
                                {{list.name}}
                                <!-- <img v-if="item.id===period.periodId" src="../assets/img/yellow-gou.png" class="disabled" /> -->
                            </li>
                        </ul>
                    </template>
                    <template v-else>
                        <div class="filter-block period-block no-filter ">
                            没有对应筛选条件
                        </div>
                    </template>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
export default {
    name: 'down-list',
    components: {

    },
    data: function() {
        return {
            showOtherMask: false,
            showType: -1,
            activeId: '',

        }
    },
    props: ['filterList', 'top'],

    computed: {

    },
    created: function() {

    },
    methods: {
        openDialog(item) {
            if (item.id == this.showType) {
                this.closeDialog()
            } else {
                this.showType = item.id
                this.showOtherMask = true

            }


        },
        closeDialog() {
            this.showType = -1
            this.$emit('showType', -1)
            setTimeout(() => {
                this.showOtherMask = false
            }, 500)
        },
        changeOther(item, list) {
            console.log(item)
            if (list.id == "") {
                item.activeId = list.id
                item.activeName = item.name
            } else {
                item.activeId = list.id
                item.activeName = list.name
            }
            this.closeDialog()
            this.$emit('selected', this.filterList)
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.down-list {
    width: 100%;
    border-bottom: 1px solid #cccccc;
    position: relative;
    z-index: 1;
    .masks {
        position: fixed;
        background: rgba(0, 0, 0, 0.4); // opacity: .4;
        height: 100%;
        width: 100%;
        top: 0.88rem;
        left: 0;
        z-index: 1001;
        &.other {
            top: 1.68rem;
            .filter-box {
                ul {
                    background: #f2f2f2;
                    padding-top: 0.1rem;
                }
            }
        }
    }

    .filter-div {
        height: 0.8rem;
        width: 100%;
        background: #fff;
        li {
            height: 0.8rem;
            display: inline-block;
            font-size: 0.28rem;
            color: #333;
            text-align: center;
            position: relative;
            &::before {
                content: '';
                height: 60%;
                width: 0;
                border-right: .02rem solid #E8E8E8;
                position: absolute;
                right: 0;
                top: 20%
            }
            &:last-child {
                &::before {
                    border-right: 0;
                }
            }
            .filter-name {
                max-width: 70%;
                display: inline-block;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                vertical-align: top;
            } //  text-align: center;
            line-height:0.8rem;
            .next {
                transform: rotateZ(90deg);
                margin-left: 0.1rem;
            }
            &.active {
                color: #17c3a0;
            }
        }
    }

    .filter-box {
        width: 100%;
        height: calc(100% - 2.66rem);
        -webkit-transform-origin: top left;
        .filter-block {
            background: #fff;
            max-height: 100%;
            overflow-y: auto;
            -webkit-transform-origin: top left;
            transition: transform 0.3s;
            &.min-filter {
                transform: scaleY(0);
            }
            &.max-filter {
                transform: scaleY(1);
            }
            &.no-filter {
                height: 1rem;
                font-size: 0.3rem;
                color: #333;
                text-align: center;
                line-height: 1rem;
            }

            li {
                height: 0.8rem;
                font-size: 0.28rem;
                padding-left: 0.32rem;
                color: #333;
                background: #fff;
                border-bottom: 1px solid #dedede;
                line-height: 0.8rem;
                &.active {
                    // color:#17c3a0;
                    font-weight: 700;
                    background: rgba(23, 195, 160, 0.15);
                }
                .disabled {
                    margin-right: 0.2rem;
                    float: right;
                    position: relative;
                    top: 0.25rem;
                }
            }
        }
    }
}

.top-enter-active {
    animation: bounce-in .3s;
}

.top-leave-active {
    animation: bounce-in 0.3s reverse;
}

@keyframes bounce-in {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}
</style>
